<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="l" uri="/lion-taglib" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .row{ margin-top: 10px;;}
        .center{text-align:center;}
        .wrap{width:900px;margin:0 auto;}
        .title{font-family: "Microsoft Yahei";}
        .tb1{ border-collapse: collapse;border: none; width: 200px;width:600px;font-size:13px;}
        .tb1 td{border:solid 1px #888;padding:2px;}
        h3{border-bottom:solid 2px #333;font-size:16px;}
        h4{border:solid 1px #aaa;padding:5px;font-size:14px;}
        
        .cases table{width:100%;margin-top:10px;font-size:13px;}
        .cases table td{padding:5px;}
        .cases table .ok{background-color:#5cb85c;color:#fff;}
        .cases table .fail{background-color:#d9534f;color:#fff;}
        
        .toTop{width:50px;height:50px;border-radius:50px;border:solid 1px #cecece;position:fixed;bottom:30px;right:100px;background:#ccc;text-align:center;line-height:50px;font-family:'Microsoft YaHei';box-shadow:0px 0px 2px #aaa;}
        .toTop:hover{background-color:#fcfcfc;}
        .toTop a{display:block;text-decoration:none;color:#666;}
        
        .p,.f,.s,.al{border:solid 1px #ececec;padding:5px 10px;color:#fff;}
       .p{background-color:#5cb85c;}
       .f{background-color:#d9534f;}
       .s{background-color:#F28B27;}
       .al{background-color:#5bc0de;}
       .cur{background-color:#dcdcdc;color:#000;}
       .filters{position: fixed;bottom: 100px ;right:100px;}
       .filters a{display: block;width: 50px;height:40px;display: block;text-align: center;line-height: 40px;font-family:'Microsoft YaHei';cursor: pointer;margin-top:2px;}
    </style>
    <script type="text/javascript">
    	function $(selectors){
    		return document.querySelector(selectors);
    	}
    	function delegate(o,e,t,fn){
    		$(o).addEventListener(e,function(evt){
    			var target = evt.srcElement?evt.srcElement:evt.target;
    			if(target.tagName.toLocaleLowerCase() == t.toLocaleLowerCase()){fn && fn.call(target,evt);}
    		});
    	}
    	function siblings(e){
    		var sibs = [];
    	   var  elem = e.parentNode.firstChild;
    	    do {
    	        if (elem != e && elem.tagName) sibs.push(elem);
    	    } while (elem = elem.nextSibling);
    	    return sibs;
    	}
    	function addClass(o,s){
    		if(o.className.indexOf(s) ==-1){
    			o.className = o.className + ' ' + s;
    		}
    	}
    	function removeClass(o,s){
    		if(s==''){return;}
    		o.className = trim(o.className.replace(s,''));
    	}
    	function haveClass(o,s){
    		return o.className.indexOf(s)>-1;
    	}
    	function trim(s){
    		return s.replace(/^\s+|\s+$/g,'');
    	}
    	window.onload = function(){
    		delegate('#filters','click','a',function(e){
    			 each(siblings(this),function(i,node){
    				removeClass(node, 'cur');
    			});
				addClass(this,'cur');
				if(haveClass(this,'s')){
					showType('.s');
				}else if(haveClass(this, 'f')){
					showType('.fail');
				}else if(haveClass(this, 'p')){
					showType('.ok');
				}else{
					showType();
				}
        	});
    	};
		
    	function each(o,fn){
    		for(var k in o){
    			fn(k,o[k]);
    		}
    	}
    	function showType(t){
    		each(document.body.querySelectorAll('.tb1'),function(i,tbl){
    			if(t==null || tbl.querySelector(t)!=null){
    				tbl.style.display='';
    			}else{
    				tbl.style.display='none';
    			}
    		});
    	}
    </script>
</head>
<body>
    <div class="wrap">
    	<a name="top"></a>
      <div class="center title row">
          <h1>${project.name}</h1>
          <h2>测试报告</h2>
      </div>
      <div class="row">
          <table width="600" align="center" class="tb1">
                <tr>
                    <td width="120">测试组</td>
                    <td>${group.name}</td>
                </tr>
              <tr>
                  <td>测试者</td>
                  <td>${testusers}</td>
              </tr>
              <tr>
                  <td>测试时间</td>
                  <td>${l:date('yyyy-MM-dd',group.startTime) } 至  ${l:date('yyyy-MM-dd',group.endTime) }</td>
              </tr>
              <tr>
                  <td>测试点</td>
                  <td>${pointNum }</td>
              </tr>
              <tr>
                  <td>测试用例数</td>
                  <td>${caseNum }</td>
              </tr>
              <tr>
                  <td>通过数</td>
                  <td>${passNum }</td>
              </tr>
              <tr>
                  <td>通过率</td>
                  <td>${passRate }%</td>
              </tr>
          </table>
      </div>
      <c:forEach items="${modules }" var="module" varStatus="i">
      <div class="row">
		<h3 class="modul-title">项目模块：${module.name }</h3>
		<c:forEach items="${module.points }" var="point" varStatus="j">
		<div class="row cases">
			<h4>测试点：${point.name }</h4>
			<c:forEach items="${point.cases}" var="tcase" varStatus="k">
			<table class="tb1" align="center">
				<tr class="casetitl ${tcase.result==2?'fail':tcase.result==1?'ok':'s' }">
					<td width="150">测试用例</td>
					<td>${l:escape(tcase.name) }</td>
				</tr>
				<tr>
					<td>测试人</td>
					<td>${l:escape(tcase.testUserName) }</td>	
				</tr>
				<tr>
					<td>测试时间</td>
					<td>${l:date('yyyy-MM-dd',tcase.testTime) }</td>	
				</tr>
				<tr>
					<td>输入</td>
					<td>${l:escape(tcase.input) }</td>
				</tr>
				<tr>
					<td>期望</td>
					<td>${l:escape(tcase.expected) }</td>
				</tr>
				<tr>
					<td>实际</td>
					<td>${l:escape(tcase.actual) }</td>
				</tr>
				<tr>
					<td>结果</td>
					<td align="center"><c:choose>
						<c:when test="${tcase.result==2 }"><b class="f">FAIL</b></c:when>
						<c:when test="${tcase.result==1 }"><b class="p">PASS</b></c:when>
						<c:otherwise><b class="s">SKIP</b></c:otherwise>
					</c:choose></td>
				</tr>
				<tr>
					<td>备注</td>
					<td>${l:escape(tcase.remark) }</td>
				</tr>
			</table>	
			</c:forEach>
			</div>
		</c:forEach>
		</div>	
      </c:forEach>
    </div>
    <span class="toTop"><a href="#top">TOP</a></span>
    <div class="filters" id="filters"><a class="p">PASS</a><a class="f  cur">FAIL</a><a class="s">SKIP</a><a class="al">ALL</a></div>
</body>
</html>